<template>
  <div class="feng">
    <div class="head">
      <div class="head_1">
        <el-button icon="el-icon-arrow-left" type="" 
        style="width:60px;height:30px; padding:0px ;"
        @click="fanhui_but()"
        >返回</el-button>
      </div>
      <span>商品分类</span>

    </div>
    <div class="sousuo"></div>
    <div class="content">
      <div class="content_1">
         <el-col :span="12">
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      style="width:108px; margin:0px;"
      @close="handleClose">
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>推荐分类</span>
        </template>
        <el-menu-item-group>
          <el-menu-item 
           style="width:108px"
          index="1-1">保健产品</el-menu-item>
          <el-menu-item index="1-2"
           style="width:108px"
          >家中常备</el-menu-item>
        </el-menu-item-group>
        
        
      </el-submenu>
      <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <span slot="title">心血管科</span>
      </el-menu-item>
      <el-menu-item index="3" >
        <i class="el-icon-document"></i>
        <span slot="title">消化系统</span>
      </el-menu-item>
      <el-menu-item index="4">
        <i class="el-icon-setting"></i>
        <span slot="title">皮肤科</span>
      </el-menu-item>
       <el-menu-item index="5">
        <i class="el-icon-setting"></i>
        <span slot="title">风湿骨科</span>
      </el-menu-item>
       <el-menu-item index="6">
        <i class="el-icon-setting"></i>
        <span slot="title">神经系统</span>
      </el-menu-item>
       <el-menu-item index="7">
        <i class="el-icon-setting"></i>
        <span slot="title">内分泌科</span>
      </el-menu-item>
    </el-menu>
  </el-col>
      </div>
      <div class="content_2">
        <div class="content_2_top"></div>
        <div class="content_2_bottom">
         <div class="content_2_1">
           <div></div>
           <div></div>
            <div></div>
           <div></div>
         </div>
         <div class="content_2_2">
            <div></div>
           <div></div>
            <div></div>
           <div></div>
         </div>
          <div class="content_2_3">
             <div></div>
            <div></div>
            <div></div>
           <div></div>
          </div>
          </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
   data() {
      return {
        activeIndex: '2'
      };
    },
  methods: {
    fanhui_but(){
          this.$router.go(-1);
    },
    
}
}
</script>
<style scoped>
.feng {
  width: 100%;
  /* text-align: center; */
  position: relative;
  
}
.head {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid black;
  line-height: 50px;
  text-align: center;
  background-color: rgb(1, 154, 254);
  font-size: 20px;
  color: white;
  position: relative;
}
.head_1{
  position: absolute;
 
}
.head_1{
  width: 5%;
  height:30px ;
}
.content {
  width: 100%;
  height: 586px;
  display: flex;
}
.content_1,
.content_2 {
  border-right: 1px solid black;
}
.content_1{
  width: 108px;
}
.content_2{
  flex: 1;
}
.content_2_top{
height: 15%;
}
.content_2_bottom{
   height: 85%;
display: flex;
}
.content_2_1,.content_2_2,.content_2_3{
  flex: 1;
  border: 1px solid black;
  display: flex;
 flex-direction:column;
}
.content_2_1>div,.content_2_2>div,.content_2_3>div{
   flex: 1;
  border: 1px solid black;
}
</style>